<template>
  <rule-build-dialog
    :visible.sync="dialogVisible"
    :excludes="excludes"
    @close="dialogClose"
    @select="handleRuleBack"
  />

</template>

<script>

import { listOfRandom } from '@/api/qu/qu'
import RuleBuildDialog from '@/views/admin/tmpl/components/components/RuleBuildDialog.vue'

export default {
  name: 'QuRandomDialog',
  components: {
    RuleBuildDialog
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    excludes: Array
  },
  data() {
    return {
      loading: false,
      postForm: {
        excludes: []
      },
      dialogVisible: false
    }
  },
  watch: {

    // 检测查询变化
    visible: {
      handler(val) {
        this.dialogVisible = val
      }
    },

    // 检测查询变化
    excludes: {
      handler(val) {
        this.postForm.excludes = val
      },
      deep: true
    }
  },

  created() {
    this.dialogVisible = this.visible
    this.postForm.excludes = this.excludes
  },
  methods: {

    dialogClose() {
      this.dialogVisible = false
      this.$emit('update:visible', false)
      this.$emit('close')
    },

    // 确认选定
    handleRuleBack(data) {
      this.loading = true


      // 返回列表
      const pointCodes = []
      for (let i = 0; i < data.pointList.length; i++) {
        pointCodes.push(data.pointList[i].pointCode)
      }

      const query = {
        repoId: data.repoId,
        quType: data.quType,
        quLevel: data.quLevel,
        num: data.num,
        pointCodes: pointCodes,
        excludes: this.postForm.excludes
      }


      listOfRandom(query).then(res => {
        this.$emit('update:visible', false)
        this.$emit('select', res.data)
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style scoped>

.el-row .tt{
  font-size: 14px;
  color: #606266;
  line-height: 24px;
}

.el-row .el-input-number{
  margin: 0 10px 0 10px;
}

.el-row {
  margin-bottom: 10px;
&:last-child {
   margin-bottom: 0;
 }
}

</style>
